<template>
    <div class="page order-detail-page">
        <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="container">
            <van-cell
                    v-if="order.take_type==1"
                    class="address-item margin-top"
                    size="large"
                    icon="location-o"
                    is-link
            >
                <div>
                    <div class="address-name">{{order.recive_name}}, {{order.mobile}}</div>
                    <div
                            class="address-vice"
                    >{{order.province}} {{order.city}} {{order.area}} {{order.address}}</div>
                </div>
                <!--        <div v-else class="no-address">请选择地址</div>-->
            </van-cell
            >

            <van-cell
                    v-if="order.take_type==2"
                    class="address-item margin-top"
                    size="large"
                    icon="location-o"
                    is-link
            >
                <div class="has-address">
                    <div style=" margin-top:1.5rem;  display: flex;justify-content: space-between" class="address-vice">
                        <div class="address-name">{{store.contact_name}}, {{store.contact_tel}}</div>
                        <div>{{store.distance>=1000?(Math.round(store.distance/100)/10).toFixed(1)+'km': store.distance+'m'}}</div>
                    </div>

                    <div>{{store.contact_address}},{{store.store_name}}</div>
                </div>
            </van-cell>

            <!-- <div>
              <van-cell v-if="order.status == 0"
                        class="address-item margin-top"
                        size="large"
                        icon="location-o"
              >
                门店地址: 金水区农业路东18号省会中心A座
              </van-cell>
            </div> -->
            <div class="cblock order-status">
                <div v-if="order.status != 0 "  class="float-right">

                    <!--          <van-count-down auto-start :time="countTime" />-->
                    <div>
                        <span style="font-weight: bold;font-size: 14px" v-if="order.take_num!=''">核销码:{{order.take_num}}</span>
                    </div>
                </div>
                <!-- <van-tag v-if="order.status == 0" type="warning">下单成功,请尽快前往门店付款</van-tag> 订单待支付 -->
                <van-tag v-if="order.status == 0" type="warning">订单待支付</van-tag>
                <van-tag v-else-if="order.status==1" type="warning">已支付</van-tag>
                <van-tag v-else-if="order.status == 2" type="primary">已发货</van-tag>
                <van-tag v-else-if="order.status == 3" type="primary">已收货</van-tag>
                <van-tag v-else-if="order.status > 3" type="success">已完成</van-tag>
                <van-tag v-else-if="order.status == -1">已失效</van-tag>
                <van-tag v-else-if="order.status == -2">已退货/退款</van-tag>
                <van-tag v-else-if="order.status < -2" type="warning">售后中</van-tag>

            </div>

            <div class="cblock order-goods">
                <div class="goods-list">
                    <div v-for="item in order.product" :key="item.sku_id">
                        <van-card
                                :num="item.count"
                                :price="item.product_price"

                                :title="item.product_title"
                                :thumb="item.product_image"
                                @click="viewGoods(item.product_id)"
                        />
                    </div>
                </div>
                <van-cell title="总价" :value="order.payamount"></van-cell>
<!--                <div class="actions">-->
<!--                    <template v-if="order.status==0">-->
<!--                        <van-button size="small" @click="cancelOrder(order.order_id)">取消</van-button>-->
<!--                        <van-button size="small" type="danger" @click="payOrder(order.order_id)">支付</van-button>-->
<!--                    </template>-->
<!--                    <template v-if="order.status > 1">-->
<!--                        <van-button size="small" @click="expressOrder(order.order_id)">查看物流</van-button>-->
<!--                    </template>-->
<!--                    <template v-if="order.status == 2">-->
<!--&lt;!&ndash;                        <van-button size="small" type="info" @click="completeOrder(order.order_id)">确认收货</van-button>&ndash;&gt;-->
<!--                    </template>-->
<!--                    <template v-if="order.status < 0 && order.status > -3">-->
<!--&lt;!&ndash;                        <van-button size="small" @click="deleteOrder(order.order_id)">删除</van-button>&ndash;&gt;-->
<!--                    </template>-->
<!--                </div>-->
            </div>
            <div class="cblock order-info">
                <van-cell title="订单号" :value="order.order_no">
                    <van-button
                            slot="right-icon"
                            v-clipboard:copy="order.order_no"
                            type="info"
                            plain
                            size="mini"
                            style="margin-left:10px;"
                            v-clipboard:success="onCopy"
                            v-clipboard:error="onError"
                    >复制</van-button>
                </van-cell>
                <van-cell title="下单时间" :value="formatDate(order.create_time)"></van-cell>
                <van-cell title="支付时间" :value="formatDate(order.pay_time)"></van-cell>
                <van-cell title="收货时间" :value="formatDate(order.confirm_time)"></van-cell>
            </div>
        </div>
    </div>
</template>
<script >
    import Vue from "vue";
    import VueClipboard from "vue-clipboard2";
    import utils from "../../utils";
    import upsdk from "upsdk-vue";

    Vue.use(VueClipboard);

    export default {
        data() {
            return {
                order_id: 0,
                countTime: 5000,
                order: {},
                tt:{},
                tn:"",
                id:"",
                store:undefined,

            };
        },
        mounted() {
            let order_id = this.$route.query.id;
            if (order_id && !isNaN(order_id)) {
                this.order_id = order_id * 1;
            } else {
                this.$toast.fail("参数错误");
                this.$router.back();
            }
            this.getData();
        },
        methods: {
            onClickLeft() {
                this.$router.back();
            },
            viewGoods(goods_id) {
                this.$router.push("/product/detail/" + goods_id);
            },
            formatDate(timestamp) {
                if (!timestamp || timestamp == 0) return "-";
                return utils.dateFormat("Y-m-d H:i:s", timestamp);
            },
            getData() {
                this.$api
                    .post("manager.order/detail", { id: this.order_id })
                    .then(json => {
                        if (json.code == 1) {
                            this.order = utils.fixListImage(json.data, "products.product_image");
                            this.store=this.order.store;

                        }
                    })
                    .catch(err => {
                        this.$toast.fail(err.msg || "参数错误");
                        this.$router.back();
                    });
            },
            cancelOrder(order_id) {
                this.$dialog
                    .confirm({
                        title: "取消订单",
                        message: "确定取消此订单?"
                    })
                    .then(() => {
                        this.$api
                            .post("member.order/cancel", { id: order_id })
                            .then(json => {
                                if (json.code == 1) {
                                    this.$toast.success(json.msg || "操作成功");
                                    this.changeStatus();
                                }
                            })
                            .catch(err => {
                                this.$toast.fail(err.msg || "操作失败");
                            });
                    });
            },
            deleteOrder(order_id) {
                this.$dialog
                    .confirm({
                        title: "删除订单",
                        message: "确定删除此订单?"
                    })
                    .then(() => {
                        this.$api
                            .post("member.order/delete", { id: order_id })
                            .then(json => {
                                if (json.code == 1) {
                                    this.$toast.success(json.msg || "操作成功");
                                    this.changeStatus();
                                }
                            })
                            .catch(err => {
                                this.$toast.fail(err.msg || "操作失败");
                            });
                    });
            },
            payOrder() {
                this.$dialog
                    .confirm({
                        title: "支付订单",
                        message: "使用云闪付支付该订单?"
                    })
                    .then(() => {

                        this.$api
                            .post("order/againPay", {
                                order_id:this.$route.query.id,
                                // products:[{ sku_id: this.order.products[0].sku_id, count: this.order.products[0].count }],
                                // //收货地址
                                // address_id:this.order.address_id,
                                // from:null,
                                // //金额
                                // total_price:this.order.products[0].product_price
                            })
                            .then(json => {
                                //下单成功
                                if (json.code == 1) {
                                    let order_id = json.data.order_id;
                                    this.id=json.data.order_id;
                                    this.tn = json.data.tn;
                                    if(!order_id){
                                        return;
                                    }
                                    upsdk.pay({
                                        tn: this.tn,
                                        success: function(res){
                                            this.$router.replace("/member/order/detail?id=" + this.id);
                                            this.$toast.success(res.msg);
                                        },
                                        fail: function(err){
                                            console.log(err)
                                        }
                                    })
                                }
                            })
                    });
            },
            expressOrder(order_id) {
                this.$router.push('/member/express?id='+order_id)
            },
            completeOrder(order_id) {
                this.$dialog
                    .confirm({
                        title: "完成订单",
                        message: "确定已收货并完成订单?"
                    })
                    .then(() => {
                        this.$api
                            .post("member.order/confirm", { id: order_id })
                            .then(json => {
                                if (json.code == 1) {
                                    this.$toast.success(json.msg || "操作成功");
                                    this.changeStatus();
                                }
                            })
                            .catch(err => {
                                this.$toast.fail(err.msg || "操作失败");
                            });
                    });
            },
            onCopy: function() {
                this.$toast.success("复制成功");
            },
            onError: function() {
                this.$toast.fail("复制失败, 请手动选择复制");
            }
        }
    };
</script>

<style lang="scss">
    .order-detail-page {
        .cblock {
            margin-top: 20px;
            .goods-list {
                padding: 10px;
            }
        }
        .order-status {
            padding: 10px;
        }
        .actions {
            padding: 10px;
            text-align: right;
            .van-button {
                margin-left: 10px;
            }
        }
    }
</style>
